/**
 * 一、函数的创建
 * 函数函数组件使用声明式函数创建或者函数表达式，在ES6之后建议可以使用箭头函数来创建
 * 函数组件必须要有一个返回值,而该返回值返回就是JSX
 * 二、函数组件的事件处理
 * 1、<button onClick={()=>{//事件处理的关键代码}}>
 * 2、<button onClick={函数名}>
 * 3、<button onClick={()=>{函数名(实参)}}>
 */
export default ()=>{
  const clickHandle1=(arg)=>{
    console.log('事件处理函数2');
    console.log('参数',arg);
  }

  const clickHandle2=(arg1,arg2,arg3,arg4)=>{
    console.log('事件处理函数3');
    console.log('参数1',arg1);
    console.log('参数2',arg2);
    console.log('参数3',arg3);
    console.log('参数4',arg4);
  }
  return (<>
    <h1>函数组件</h1>
    <div>
      <button onClick={()=>{
        console.log('事件处理函数1');
      }}>按钮0</button>
      <button onClick={clickHandle1}>按钮1</button>
      <button onClick={(e)=>{clickHandle2(10,20,30,e)}}>按钮2</button>
    </div>
  </>)
}